import React, { useEffect, useState } from 'react';
import { Card, Typography, Alert, Row, Col, Icon, message,  } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less'
import {
  monthFlow,
  getGoodsRank,
  getOrder,
  getPaymentType,
  getRevenue,
  getCustomer,
} from '@/services/index'
import GapBlock from '@/components/GapBlock';
import LineCharts from '@/components/LineChart';
import DoubleLineCharts from '@/components/DoubleLineChart';
import RevenueChart from '@/components/RevenueChart';
import PayChart from '@/components/PayChart';
import SexChart from '@/components/SexChart';

const rdata = [
  {
    year: "0",
    value: 0
  },
  {
    year: "0.2",
    value: 0
  },
  {
    year: "0.4",
    value: 0
  },
  {
    year: "0.6",
    value: 0
  },
  {
    year: "0.8",
    value: 0
  },
  {
    year: "1",
    value: 0
  },
];

const lists = {
  sphoneTotalTurnover: '门店收银',
  cashierTotalTurnover: '员工收银',
  mallTotalTurnover: '网店直销',
  advertorialTotalTurnover: '软文营销',
  liveTotalTurnover: '直播营销',
  staffDistriTurnover: '员工分销',
  membersDistriTurnover: '会员分销',
}

// const sexName = {
//   '男': 
// }

const Index = props => {
  const [ranks, setRanks] = useState(null)
  const [orders, setOrders] = useState([])
  const [revenue, setRevenue] = useState(null)
  const [payData, setPayData] = useState([])
  const [sexData, setSexData] = useState(null)

  useEffect(() => {
    goodsRanking()
    getOrderList()
    getRevenueList()
    payList()
    fetchCustomer()
  }, [])

  const goodsRanking = async (params = {
    dateType: "day",
    topCount: 10,
  }) => {
    const res = await getGoodsRank(params)
    setRanks(res.data)
  }

  const getOrderList = async (params = { dateOffset: 1 }) => {
    const res = await getOrder(params)
    if (res.code != 0) return message.warning(res.msg)

    const initData = res.data.month_0
    const finData = []
    initData.amountList.map((d, index) => {
      finData.push({
        month: index + 1,
        type: '订单金额',
        value: d
      })
    })
    initData.countList.map((d, index) => {
      finData.push({
        month: index + 1,
        type: '本月订单',
        value: d
      })
    })
    setOrders(finData)
  }

  const getRevenueList = async (params = { dateType: "month" }) => {
    const res = await getRevenue(params)
    if (res.code != 0) return message.warning(res.msg)
    const data = []
    Object.keys(res.data).map(o => {
      data.push({
        name: lists[o],
        value: res.data[o],
      })
    })
    setRevenue(data)
  }

  const payList = async params => {
    const res = await getPaymentType(params)
    if (res.code != 0) return message.warning(res.msg)
    const finData = []
    res.data.map(r => {
      finData.push({
        item: r.payTypeName,
        count: r.amoutProportion
      })
    })
    setPayData(finData)
  }

  const fetchCustomer = async params => {
    const res = await getCustomer(params)
    if (res.code != 0) return message.warning(res.msg)
    if (!res.data) return message.info('暂无数据')
    const finData = []
    // Object.keys(res.data).map(e => {
    //   finData.push({
    //     item: 
    //   })
    // })
  }

  return (
    <PageHeaderWrapper>
    <Row className={styles.index} gutter={16}>
      <Col span={6}>
        <Row className={styles.fir}>
          <Col span={8} className={styles.icon}>
            <div>
              <Icon type="reconciliation" style={{ fontSize: '24px', color: '#fff' }} />
            </div>
          </Col>
          <Col span={16} className={styles.test}>
            <div className={`${styles.num} ${styles.one}`}>0</div>  
            <div>待处理订单（笔）</div>  
            <div>已完成订单 0</div>  
          </Col>
        </Row>       
      </Col>
      <Col span={6}>
        <Row className={styles.fir}>
          <Col span={8} className={styles.icon2}>
            <div>
              <Icon type="pay-circle" style={{ fontSize: '24px', color: '#fff' }} />
            </div>
          </Col>
          <Col span={16} className={styles.test}>
            <div className={`${styles.num} ${styles.two}`}>0</div>  
            <div>月交易金额（元）</div>  
            <div>今日金额 0</div>  
          </Col>
        </Row>       
      </Col>
      <Col span={6}>
        <Row className={styles.fir}>
          <Col span={8} className={styles.icon3}>
            <div>
              <Icon type="fund" style={{ fontSize: '24px', color: '#fff' }} />
            </div>
          </Col>
          <Col span={16} className={styles.test}>
            <div className={`${styles.num} ${styles.three}`}>{0}</div>  
            <div>月线上流量（次）</div>  
            <div>今日统计 0</div>  
          </Col>
        </Row>       
      </Col>
      <Col span={6}>
        <Row className={styles.fir}>
          <Col span={8} className={styles.icon4}>
            <div>
              <Icon type="team" style={{ fontSize: '24px', color: '#fff' }} />
            </div>
          </Col>
          <Col span={16} className={styles.test}>
            <div className={`${styles.num} ${styles.four}`}>0</div>  
            <div>月交易认次（次）</div>  
            <div>今日人次 0</div>  
          </Col>
        </Row>       
      </Col>
    </Row>
    <GapBlock />
    <Row gutter={8}>
      <Col span={6} className={styles.chartBg}>
        <LineCharts data={rdata} x='year' y='value' style={{ marginLeft: -30 }} />
      </Col>
      <Col span={12}>
        <div className={styles.chartBg}>
          <DoubleLineCharts data={orders} x='month' y='value' height={280} />
        </div>
        <GapBlock />
        <div className={styles.chartBg}>
          <RevenueChart x='name' y='value' data={revenue} height={210} />
        </div>
      </Col>
      <Col span={6}>
        <div className={styles.chartBg}>
          <PayChart data={payData} height={280} style={{marginLeft: -30}} />
        </div>
        <GapBlock />
        <div className={styles.chartBg}>
          {sexData ? <SexChart height={210} /> : '暂无数据'}
        </div>
      </Col>
    </Row>
  </PageHeaderWrapper>
  )
}
export default Index
